<template>
  <el-row type="flex" class="mapWrap">
    <div v-if="$store.getters.getIsGroupUsers && $store.getters.getLocation !== '全国'" style="position: absolute;z-index: 9999;right:5%;top:5%">
      <el-button
        type="text"
        size="medium"
        style="font-size: 18px"
        @click="selectProvince('100000')"
      >返回</el-button>
    </div>
    <el-col>
      <FourChinaMap
        :height="'100%'"
        :width="'100%'"
        @clickOnMap="selectProvince"
      />
    </el-col>
    <el-col class="mapTableContainer">
      <el-row class="mapTableWrap">
        <el-row class="mapTableHeader">{{ '测试网关数量' }}</el-row>
        <el-row class="mapTableValue">
          <countTo :startVal="0" :separator="','" :endVal="gateway_quantity" :decimals="0" :duration="2000"/>
          <span style="color: #ffffff;padding-left: 10px">台</span></el-row>
      </el-row>
      <el-row class="mapTableWrap">
        <el-row class="mapTableHeader">{{ '拨测次数' }}</el-row>
        <el-row class="mapTableValue">
          <countTo :startVal="0" :separator="','" :endVal="dial_test_time" :decimals="0" :duration="2000"/>
          <span style="color: #ffffff;padding-left: 10px">次</span></el-row>
      </el-row>
      <el-row class="mapTableWrap">
        <el-row class="mapTableHeader">{{ '纳管数量' }}</el-row>
        <el-row class="mapTableValue">
          <countTo
            :startVal="0"
            :separator="','"
            :endVal="manage_quantity"
            :decimals="0"
            :duration="2000"
          />
          <span style="color: #ffffff;padding-left: 10px">台</span></el-row>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
  import FourChinaMap from './FourChinaMap'
  import countTo from "vue-count-to";
  export default {
    name: "Map",
    components: {
      FourChinaMap,
      countTo
    },
    props: {
      gateway_quantity: {
        type: Number,
        default: 0
      },
      dial_test_time: {
        type: Number,
        default: 0
      },
      manage_quantity: {
        type: Number,
        default: 0
      },
      data_month: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
      }
    },
    methods: {
      selectProvince(code) {
        const targetCode = parseInt(code)
        this.$bus.$emit('locationSelect', targetCode)
      }
    }
  }
</script>

<style scoped>
.mapWrap{
  position: relative;
  height: 56vh;
  /*background-image: radial-gradient(#18576e, #040417);*/
  /*background: rgba(0,33,135,0.24);*/
  /*border: 1px solid rgba(14,101,187,0.66);*/
  /*box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);*/
  background: rgba(14,22,95,0.4);
  border: 1px solid rgba(14,101,187,0.46);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
}
.mapTableContainer{
  padding-top: 16%;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mapTableWrap{
  margin-top: 30px;
  width: 70%;
  height: 70px;
  border-bottom: 2px solid rgba(47,226,255, 0.3);
}
.mapTableHeader{
  height: 38px;
  line-height: 38px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 18px;
  text-align: left;
}
.mapTableValue{
  height: 32px;
  color: #00DDFF;
  font-size: 16px;
  line-height: 32px;
  text-align: left;
}
@media only screen and (max-width: 1600px) {
  .mapTableHeader {
    font-size: 16px;
  }
  .mapTableValue {
    font-size: 12px;
  }
}
</style>
